<template>
	<view class="content bg-drak ft-main">
		<view class="gap"></view>
		<view class="row dflex padding-lr">
			<text class="tit">真实姓名</text>
			<input class="input" type="text" v-model="account.realName" placeholder="真实姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row dflex padding-lr">
			<text class="tit">身份证号</text>
			<input class="input" type="text" v-model="account.documentNumber" placeholder="请输入身份证号码"
				placeholder-class="placeholder" />
		</view>
		<view class="row dflex padding-left">
			<text class="tit">所属银行</text>
			<view class="dflex-b flex1">
				<view class="flex1 input_t ft-dark-3" @click="bankShow=true">{{ account.bankName||"请选择所属银行" }}</view>
				<view class="pos-r">
					<view class="vertical-line" style="right:100%;height: 100%;"></view>
					<view class="dflex" @click="bankShow=true">
						<text class="ft-dark-3 padding-lr-sm">请选择银行</text>
					</view>
				</view>
			</view>
		</view>
		<view class="row dflex padding-lr">
			<text class="tit">银行卡号</text>
			<input class="input" type="number" v-model="account.account" placeholder="请输入银行卡号"
				placeholder-class="placeholder" />
		</view>
		<!-- 04.02 服务标签弹出层 -->
		<use-popup mode="bottom" bgclass=" " v-model="bankShow">
			<view class="bg-main border-radius-top30 safe-area-inset-bottom">
				<view class="tac fwbd w-full padding">选择所属银行</view>
				<view class="dflex-a padding-lr padding-bottom" style="flex-wrap: wrap;">
					<image class="bank-img" v-for="(item, index) in banks" :key="index"
					 @click="setBank(item)" :src="item.img" mode="aspectFit"/>
				</view>
			</view>
		</use-popup>
		
		<view class="row dflex padding-left">
			<text class="tit">手机号</text>
			<view class="dflex-b flex1">
				<input class="input" type="number" v-model="account.mobilePhone" placeholder="请输入手机号码"
					placeholder-class="placeholder" />
				<view class="pos-r">
					<view class="vertical-line" style="right:100%;height: 100%;"></view>
					<view class="dflex" @click="getCode">
						<text class="ft-dark-3 padding-lr-sm">{{state}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="row dflex padding-lr">
			<text class="tit">验证码</text>
			<input class="input" type="number" v-model="smsVerificationCode" placeholder="请输入手机验证码"
				placeholder-class="placeholder" />
		</view>
		<view class="padding w-full margin-top-big">
			<view class="dflex-b border-radius-big">
				<view class="tac padding-tb-sm flex1 bg-base" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bankCode from "../../../js_sdk/apis/bankcode.js"
	import { mapState } from 'vuex';
	import {bind_account,bind_verification} from "../../../js_sdk/apis/user.js"
 	export default {
		data() {
			return {
				addrDefault: false,
				bankShow:false,
				account: {
					account:"",
					bankNO:"",
					bankName:"",
					documentNumber:"",
					documentType:"1",
					mobilePhone:"",
					realName:""
				},
				bindRecordId:"2700000641642490426250",
				smsVerificationCode:"",
				banks: [{
					"id": "307584007998",
					"name": "平安银行",
					"img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c32e5061-f776-4423-93c4-27dfe5ea43ff/b0050b3a-bfad-4946-97ee-fc084952270c.png"
				},{
					"id": "105100000017",
					"name": "建设银行",
					"img":"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c32e5061-f776-4423-93c4-27dfe5ea43ff/8a0bf438-5bb6-4fd4-a805-8dae032cfcdd.png"
				}],
				state:'获取验证码',
				timer:'',
				type: 'add',
				title: ''
			};
		},
		onLoad(options) {
			this.title = '新增银行卡';
			if (options.type === 'edit') {
				this.title = '编辑银行卡';
			}
			this.banks=bankCode
			console.log(this.banks)
			this.type = options.type || 'add';
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		methods: {
			setBank(item){
				this.account.bankNO=item.id
				this.account.bankName=item.name
				this.bankShow=false
			},
			//计时器
			getCode(){
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				var validateBankCard = /^([1-9]{1})(\d{14}|\d{18})$/;
				let reg_card=  /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				if(!this.account.realName){
					uni.showToast({title:"请填写姓名!", icon:"none"});
					return;
				}
				if(!reg_card.test(this.account.documentNumber)){
					uni.showToast({icon:"none",title:"请输入正确身份证号！"})
					return false
				}
				if(!this.account.bankNO){
					uni.showToast({title:"请选择所属银行!", icon:"none"});
					return;
				}
				if(!this.account.account){
					uni.showToast({icon:"none",title:"请输入正确银行卡号！"})
					return false
				}
				if(!reg_tel.test(this.account.mobilePhone)){
					uni.showToast({icon:"none",title:"请输入正确手机号！"})
					return false
				}
				if(this.state!='获取验证码'){
					uni.showToast({title:"短时间不能重复发送验证码!", icon:"none"});
					return;
				}
				
				
				this.startTimer();
				uni.showLoading({
					title:"发送中"
				})
				bind_account(this.account).then(res=>{
					this.bindRecordId=res.data.content.responseValue
					console.log(this.bindRecordId)
					uni.hideLoading();
					uni.showToast({title:"发送成功!", icon:"none"});
				}).catch(e=>{
					uni.showModal({
						title:"发送失败",
						content:e.msg
					})
				})
			},
			startTimer(){
				this.state=60;
				this.timer=setInterval(()=>{
					this.state=this.state-1;
					if(this.state==0){
						clearInterval(this.timer);
						this.state='获取验证码';
					}
				}, 1000)
			},
			//提交
			submit() {
				if(this.bindRecordId&&this.smsVerificationCode){
					bind_verification({
						bindRecordId:this.bindRecordId,
						smsVerificationCode:this.smsVerificationCode,
					}).then(res=>{
						if(res.success){
							this.$api.msg('添加成功');
							this.$api.timerout(() => {
								uni.navigateBack();
							}, 100);
						}
					})
				}else{
					uni.showModal({
						title:"温馨提示",
						content:"请先获取短信验证码输入后即可添加绑定。"
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
.bank-img{
	height: 130rpx;
	border: 2px solid #f5f5f5;
	border-radius: 10px;
	width: 48%;
}
	.row {
		background: #fff;
		position: relative;
		height: 110rpx;
		margin: 20rpx;
		border-radius: 20rpx;

		.tit {
			flex-shrink: 0;
			width: 150rpx;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			padding-left: 0;
		}

		.input_t {
			color: #333;
		}
	}
</style>
